<!-- 【入库信息】弹窗页面 -->
<template>
  <div class="body">
    <el-dialog :title="dialog.title" :close-on-click-modal="false" :visible.sync="dialog.open">
      <el-form :model="storage" ref="storageForm" :rules="rules" label-width="120px" class="edit-form">
        <el-form-item label="主键id" class="hidden" prop="id">
          <el-input type="hidden" v-model="storage.id"/>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierId">
          <el-select v-model="storage.supplierId"  @change="supplierIdChange" placeholder="请选择供应商名称" filterable :disabled="dialog.disabled" class="sui-input">
            <el-option v-for="supplier in supplierDict" :key="supplier.id" :value="supplier.id" :label="supplier.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物品名称" prop="goodsId">
          <el-select v-model="storage.goodsId" placeholder="请选择物品名称" filterable :disabled="dialog.disabled" class="sui-input">
            <el-option v-for="goods in goodsDict" :key="goods.id" :value="goods.id" :label="goods.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" prop="number">
          <el-input v-model="storage.number" type="number" mini="0" placeholder="请输入入库数量" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="入库备注" prop="remarks">
          <el-input type="textarea" v-model="storage.remarks" placeholder="请输入入库备注" :disabled="dialog.disabled" class="sui-textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" v-if="!dialog.disabled" type="primary" @click="submitForm()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "storageForm",
    data() {
      return {
        supplierDict:[],
        goodsDict:[],
        sysUserDict:[],
        //弹窗设置
        dialog: {
          title: "",
          open: false,
          disabled: false
        },
        //表单数据
        storage: {
          id: "",
          supplierId: "",
          goodsId: "",
          number: "",
          storageTime: "",
          userId: "",
          remarks: "",
        },
        //表单校验
        rules: {
          supplierId: [{required: true, message: '请选择供应商名称', trigger: 'change'}],
          goodsId: [{required: true, message: '请选择物品名称', trigger: 'change'}],
          number: [{required: true, message: '请输入入库数量', trigger: 'blur'}],
          storageTime: [{required: true, message: '请选择入库时间', trigger: 'change'}],
          userId: [{required: true, message: '请选择操作人', trigger: 'change'}],
          remarks: [{required: true, message: '请输入入库备注', trigger: 'blur'}],
        }
      }
    },
    computed: {
    },
    methods: {
      //【供应商名称】
      getSupplierDict() {
        this.$request.doGet('/admin/supplier/getList').then(res => {
          if (res.isOk) {
            this.supplierDict = res.list;
          }
        })
      },
      //【物品名称】
      getGoodsDict(supplierId) {
        this.$request.doGet('/admin/goods/getList?supplierId='+supplierId).then(res => {
          if (res.isOk) {
            this.goodsDict = res.list;
          }
        })
      },
      //切换供应商
      supplierIdChange(supplierId){
        this.getGoodsDict(supplierId)
      },
      //【操作人】
      getSysUserDict() {
        this.$request.doGet('/admin/sysUser/getList').then(res => {
          if (res.isOk) {
            this.sysUserDict = res.list;
          }
        })
      },
      //打开弹窗
      open(option) {
        const pageFrom = option.pageFrom;
        const disabled = pageFrom == 'view' ? true : false;
        this.showDialog(option.title, disabled);
        this.getSupplierDict();//加载【供应商名称】
        this.getSysUserDict();//加载【操作人】
        if (pageFrom == 'edit' || pageFrom == 'view') {
          this.getStorage(option.id);
        }
      },
      //显示弹窗
      showDialog(title, disabled) {
        this.resetForm(this.$refs.storageForm);//重置表单
        this.dialog.open = true;//打开弹窗
        this.dialog.title = title;//设置标题
        this.dialog.disabled = disabled;//是否可编辑
      },
      //取消弹窗
      cancel: function () {
        this.dialog.open = false;
      },
      //根据id获取数据
      getStorage(id) {
        this.$request.doGet("/admin/storage/get?id=" + id).then(res => {
          if (res.isOk) {
            this.storage = res.obj;
            this.getGoodsDict(res.obj.supplierId)
          }
        });
      },
      //提交表单
      submitForm: function () {
        const that = this;
        that.$refs.storageForm.validate((valid) => {
          if (valid) {//表单校验
            that.$request.doPost('/admin/storage/sub', that.storage).then(res => {
              if (res.isOk) {
                that.cancel();
                that.showSuccess("提交成功");
                that.$emit('reloadList');
              }
            });
          }
        });
      }

    }
  }
</script>

<style scoped>

</style>
